<!--
 * @Author: your name
 * @Date: 2022-04-10 23:14:05
 * @LastEditTime: 2022-04-18 23:02:32
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-admin-template\src\views\website\websiteConfiguration.vue
-->
<template>
  <div>
    <el-button type="primary"
               size='small'
               @click="toAddWebsite">
      新增站点
    </el-button>
    <el-table v-loading="loading"
              :data="tableData"
              style="width: 100%"
              size="mini">
      <el-table-column type="index"
                       :index="1"
                       label="序号"
                       align="center" />
      <el-table-column label="名称"
                       width="150"
                       prop="name"
                       align="center" />
      <el-table-column label="地址"
                       width="300"
                       align="center">
        <template slot-scope="scope">
          <el-tag type="success">{{scope.row.url}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          {{ moment(scope.row.created_at).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column label="状态"
                       align="center"
                       width="100">
        <template slot-scope="scope">
          <el-tag>{{scope.row.status ? '启用' : '禁用'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="300"
                       align="center">
        <template slot-scope="scope">
          <el-button type="success"
                     size='mini'
                     v-if="scope.row.status"
                     @click.stop="toPublicWebsite(scope.row.id, false)">下架</el-button>
          <el-button type="success"
                     size='mini'
                     v-else
                     @click.stop="toPublicWebsite(scope.row.id, true)">发布</el-button>
          <el-button type="primary"
                     size='mini'
                     @click.stop="toUpdateWebsite(scope.row.id)">修改</el-button>
          <el-button type="danger"
                     size='mini'
                     @click.stop="deleteWebsiteById(scope.row.id)">删除</el-button>
          <el-button type="primary"
                     size='mini'
                     @click.stop="toDetails(scope.row)">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { findAllWebsites, deleteWebsiteById, publicWebsite } from '@/api/website'
import moment from 'moment'
export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      loading: false,
      tableData: [],
      moment
    };
  },
  created() {
    this.queryWebsiteData()
  },
  methods: {
    async queryWebsiteData() {
      this.loading = true
      const res = await findAllWebsites()
      this.loading = false
      this.tableData = res.data
    },
    toAddWebsite() {
      this.$router.push({
        path: '/publishWebsite'
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    toDetails(row) {
      this.$router.push({
        path: '/websiteDetails',
        query: { id: row.id }
      })
    },
    async toPublicWebsite(id, status) {
      const obj = {
        id,
        status
      }
      const res = await publicWebsite(obj)
      if (res) {// 提示用户保存成功，刷新表格数据并关闭模态框
        this.$notify.success({
          title: '成功',
          message: res.message
        })
        this.queryWebsiteData()
      } else {
        this.$notify.error({
          title: '失败',
          message: res.message
        })
      }
    },
    deleteWebsiteById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteWebsiteById({ id })
        this.$message({
          type: 'success',
          message: res.message
        })
        this.queryWebsiteData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    toUpdateWebsite(id) {
      this.$router.push({
        path: '/publishWebsite',
        query: { id }
      })
    },
  }
};
</script>

<style>
</style>
